<template>
	<view class="container">
		<scroll-view @scroll="Scroll" :scroll-top="ScrollTop.New_ScrollTop" scroll-y="true" class="scroll_view"
			:show-scrollbar="false">
			<view v-for="item in ChatHistory" :key="item.id" :class="item.type=='send'? 'isleft':'isright'">
				<text space="nbsp" class="istext">
					{{ item.content }}
				</text>
			</view>
		</scroll-view>

		<view class="bottom" @click="GoTop()">
			<scroll-view scroll-y="true" class="scroll_text" :show-scrollbar="false">
				<textarea auto-height v-model="send" />
			</scroll-view>
			<view class="sending" @click="issend()">
				发送
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		nextTick,
		onMounted
	} from 'vue';


	const ChatHistory = ref([{
		id: 1,
		type: 'receive',
		content: '你好，请问有什么可以帮你的吗?'
	}, {
		id: 2,
		type: 'send',
		content: '我想询问一下'
	}, ]);

	const ScrollTop = ref({
		New_ScrollTop: 0,
		Old_ScrollTop: 0,
	})

	function Scroll(e) {
		console.log(e.detail.scrollTop)
		ScrollTop.value.Old_ScrollTop = e.detail.scrollTop
	}

	function GoTop() {
		ScrollTop.value.New_ScrollTop = ScrollTop.value.Old_ScrollTop;
		nextTick(() => {
			ScrollTop.value.New_ScrollTop = 9999;
		});
	}

	const send = ref(null)

	function issend() {
		if (send.value) {
			console.log(send.value);
			ChatHistory.value.push({
				id: ChatHistory.value.length,
				type: 'send',
				content: send.value
			});
			send.value = null;
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.bottom {
		position: absolute;
		bottom: 0;
		width: 98vw;
		padding: 1vw;
		display: flex;
		justify-content: space-around;
		background-color: rgb(255, 255, 255);

		.scroll_text {
			max-height: 15vh;
			padding: 1vw;
			width: 82vw;
			border-radius: 5px;
			border: solid rgb(239, 239, 239);
		}

		.sending {
			background-color: rgb(0, 170, 255);
			padding: 1vh;
			text-align: center;
			border-radius: 5px;
			color: white;
			align-self: flex-end;
		}
	}

	.scroll_view {
		height: 95vh;
		margin-bottom: 5vh;
		background-color: rgb(249, 249, 249);
	}

	.istext {
		max-width: 80vw;
		padding: 10px;
		margin: 10px;
		border-radius: 10px;
		box-shadow: 0px 1px 3px #b4b4b4;
		overflow-wrap: break-word;
	}

	.isleft {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.istext {
			background-color: rgb(166, 255, 250);
		}

	}

	.isright {
		width: 100%;
		display: flex;
		justify-content: flex-start;

		.istext {
			background-color: rgb(255, 228, 212);
		}
	}
</style>